@mixin heading-anchor($element-name) {
  .#{$element-name} {
    opacity: 0;
    align-self: flex-start;
    outline: none;

    &::after {
      content: "#";
      position: absolute;
      margin-left: -1.5rem;
      color: $gray-400;
      padding-right: 0.45rem;
    }

    &:hover {
      opacity: 1;
    }
  }

  h2, h3, h4, h5, h6 {
    &:hover {
      .#{$element-name} {
        opacity: 1;
      }
    }
  }

  h1 {
    .#{$element-name} {
      display: none;
    }
  }

  h4, h5, h6 {
    .#{$element-name}::after {
      padding-right: 0.6rem;
    }
  }
}
